<script lang="ts" setup>
import { userListRemoveApi } from '@/business'
import type { UserListData } from '@/interfaces/RequestType'
import { ElMessage, ElMessageBox, type TableInstance } from 'element-plus'

// #region 引入包, 函数和组件
import { ref } from 'vue'
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const { tableData, query } = defineProps<{
  tableData: UserListData[]
  query: { page: number; size: number }
}>()
const emits = defineEmits<{
  getUserList: [query: { page: number; size: number }]
  openDialog: [row: UserListData | null]
  closeDialog: []
}>()
// #endregion

// #region // 变量
const removeUsername = ref('') // 要删除的用户名
const tableRef = ref<TableInstance | null>(null) // 表格引用
// #endregion

// #region // 函数
// 删除用户
const removeUser = async (userId: number) => {
  try {
    const res = await userListRemoveApi({ userId })
    if (res.data.code === 0) {
      ElMessage.success('删除成功')
      // 再次调用用户列表接口更新数据
      emits('getUserList', query)
    } else {
      ElMessage.error('删除失败')
    }
  } catch (error) {
    console.error(error)
  }
}
// 删除按钮点击事件
const remove = (e: { row: UserListData }) => {
  // console.log(e.row.username)
  removeUsername.value = e.row.username
  ElMessageBox({
    title: 'Warning',
    type: 'warning',
    message: `确定要删除 ${removeUsername.value} 吗？`,
    showCancelButton: true,
  })
    .then(() => {
      // 调用删除接口
      removeUser(e.row.id)
      // 再次调用用户列表接口更新数据
      emits('getUserList', query)
    })
    .catch(() => {
      ElMessage.info('取消删除')
    })
}

// #endregion

// #region // 生命周期和vue函数
defineExpose({
  tableRef
})
// #endregion
</script>

<template>
  <div class="table_list">
    <el-table class="table" ref="tableRef" :data="tableData" :highlight-current-row="true">
    <el-table-column fixed type="selection" width="55" />
      <el-table-column prop="avatar" label="头像" width="80">
        <template #default="scoped">
          <el-avatar :src="scoped.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="age" label="年龄" width="120" />
      <el-table-column prop="realname" label="真实姓名" width="120" />
      <el-table-column prop="city" label="城市" width="120" />
      <el-table-column prop="address" label="地址" width="200" />
      <el-table-column prop="sex" label="性别" width="120">
        <template #default="scoped">
          <el-tag :type="scoped.row.sex === 2 ? 'danger' : 'success'">{{
            scoped.row.sex === 2 ? '女' : '男'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="生日" width="120" />
      <el-table-column fixed="right" label="操作" min-width="140">
        <template #default="scoped: { row: UserListData }">
          <el-button type="danger" size="small" @click="remove(scoped)">删除</el-button>
          <el-button type="primary" size="small" @click="emits('openDialog', scoped.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="sass" scoped>

</style>
